<style>
    .info-box {
        height: 85px;
        background-color: white;
        background-color: #ecf0f5;
    }

    .info-box .info-box-icon {
        border-top-left-radius: 2px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 2px;
        display: block;
        float: left;
        height: 85px;
        width: 85px;
        text-align: center;
        font-size: 45px;
        line-height: 85px;
        background: rgba(0, 0, 0, 0.2);
    }

    .info-box .info-box-content {
        padding: 5px 10px;
        margin-left: 85px;
    }

    .info-box .info-box-content .info-box-text {
        display: block;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
    }

    .info-box .info-box-content .info-box-number {
        padding-top: 20px;
        display: block;
        font-weight: bold;
        font-size: 18px;
    }

    .major {
        font-weight: 10px;
        color: #01AAED;
    }

    .main {
        margin-top: 25px;
    }

    .main .layui-row {
        margin: 10px 0;
    }
</style>
<div class="layui-fluid main">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#00c0ef !important;color:white;"><i
                        class="fa fa-newspaper-o" aria-hidden="true"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">文章数量</span>
                    <span class="info-box-number">$$$ .news %%%</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#dd4b39 !important;color:white;"><i
                        class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">当前服务器时间</span>
                    <span class="info-box-number">$$$ .NowTime %%%</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#00a65a !important;color:white;"><i
                        class="fa fa-bar-chart" aria-hidden="true"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">机构数量</span>
                    <span class="info-box-number">$$$ .mechanism %%%</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#f39c12 !important;color:white;"><i
                        class="fa fa-handshake-o" aria-hidden="true"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">合作数量</span>
                    <span class="info-box-number">$$$ .handshake %%%</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">2020年04月15日</h3>
                        <p>
                            <h3>开始组建基本网站框架</h3>
                            <ul>
                                <li>基于golang开始组建网站基础框架</li>
                                <li>服务端使用beego框架进行组建</li>
                                <li>后台页面使用Layui进行重组</li>
                                <li>前端页面采用模板替换+VUE页面拼组的形式呈现，而不采用VUE编译的形式</li>
                            </ul>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">发展进度</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    layui.use('jquery', function () {
        var $ = layui.jquery;
        $('#test').on('click', function () {
            parent.message.show({
                skin: 'cyan'
            });
        });
    });
</script>